<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
</head>
<body>
    <div id="root">
    
    </div>
    <script type="text/babel">
        // 1.组件内根据条件返回不同的结构
        function LoginJudge(props) {
            if(props.isLogin) {
                return <p>欢迎回来！</p>
            }else {
                return <p>请重新登录！</p>
            }
        }
        // ReactDOM.render(<LoginJudge isLogin={true}/>, document.getElementById('root'));  欢迎回来！


        // 2.组件内根据条件返回不同的子组件
        function LoginJudge1(props) {
            if(props.isLogin) {
                return <Index/>
            }else {
                return <Login/>
            }
        }
        function Index() {
            return <p>欢迎回来！</p>
        }
        function Login() {
            return <p>请重新登录！</p>
        }
        // ReactDOM.render(<LoginJudge1 isLogin={false}/>, document.getElementById('root'));  请重新登录！


        class Notice extends React.Component{
            constructor(props) {
                super(props);
                this.state = {
                    username:'张一山',
                    msg:['新邮件']
                }
            }

            render() {
                return (
                    <div>
                        <h3>你好！{this.state.username}</h3>    
                        {
                            this.state.msg.length>0 && <p>你有{this.state.msg.length}条信息！</p>
                        }
                    </div>
                )
            }
        }
        ReactDOM.render(<Notice/>, document.getElementById('root'));
    </script>
</body>
</html>